<template>
  <div class="app-container calendar-list-container">
    <div class="filter-container">
      <el-input  style="width: 200px;" class="filter-item" placeholder="输入关键字进行过滤" v-model="filterText"> </el-input>
      <el-button type="primary" v-if="businessGoodsCategoryManager_btn_add" icon="plus" @click="handleAdd">添加</el-button>
      <el-button type="primary" v-if="businessGoodsCategoryManager_btn_edit" icon="edit" @click="handleUpdate">编辑</el-button>
      <el-button type="primary" v-if="businessGoodsCategoryManager_btn_del" icon="delete" @click="handleDelete">删除</el-button>

    </div>
    <el-row>
      <el-col :span="8" style='margin-top:15px;'>
        <el-tree
          class="filter-tree"
          :data="treeData"
          node-key="id"
          highlight-current
          :props="defaultProps"
          :filter-node-method="filterNode"
          ref="goodsTree"
          @node-click="getNodeData"
          default-expand-all
        >
        </el-tree>
      </el-col>
      <el-col :span="16" style='margin-top:15px;'>
        <el-card class="box-card">
          <el-form :label-position="labelPosition" label-width="80px" :rules="rules" :model="form" ref="form">
            <el-form-item label="父级商品编码" prop="parentid">
              <el-input v-model="form.parentid" :readonly="true" ></el-input>
            </el-form-item>
            <el-form-item label="名称" prop="name">
              <el-input v-model="form.name"  :readonly="formReadOnly" placeholder="请输入名称"></el-input>
            </el-form-item>
            <el-form-item label="排序" prop="name">
              <el-input v-model.number="form.sort" :readonly="formReadOnly" placeholder="请输入排序序号"></el-input>
            </el-form-item>
            <el-form-item v-if="formStatus == 'update'">
              <el-button type="primary" @click="doUpdate('form')">更新</el-button>
              <el-button @click="doCancel">取消</el-button>
            </el-form-item>
            <el-form-item v-if="formStatus == 'create'">
              <el-button type="primary" @click="doCreate('form')">保存</el-button>
              <el-button @click="doCancel">取消</el-button>
            </el-form-item>
          </el-form>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import * as service from 'api/business/businessGoodsCategory/index';
  import { mapGetters } from 'vuex';
  export default {
    name: 'businessGoodsCategory',
    data() {
      return {
        filterText: '',
        treeData: [],
        defaultProps: {
          children: 'children',
          label: 'name'
        },
        currentId: -1,
        labelPosition: 'left',
        formReadOnly: true,
        form: {
          parentid: 0,
          name: '',
          sort: 1
        },
        formStatus: '',
        rules: {
          parentid: [
            {
              required: true,
              message: '请输入父级id',
              trigger: 'blur',
              type: 'number'
            }
          ], name: [
            {
              required: true,
              message: '请输入商品名称',
              trigger: 'blur'
            },
            {
              min: 1,
              max: 60,
              message: '长度在 1 到 60 个字符',
              trigger: 'blur'
            }
          ], sort: [
            {
              required: true,
              message: '请输入',
              trigger: 'blur',
              type: 'number'
            }]
        },
        businessGoodsCategoryManager_btn_edit: false,
        businessGoodsCategoryManager_btn_del: false,
        businessGoodsCategoryManager_btn_add: false,
        textMap: {
          update: '编辑',
          create: '创建'
        },
        tableKey: 0
      }
    },
    created() {
      this.getList();
      this.businessGoodsCategoryManager_btn_edit = this.elements['businessGoodsCategoryManager:btn_edit'];
      this.businessGoodsCategoryManager_btn_del = this.elements['businessGoodsCategoryManager:btn_del'];
      this.businessGoodsCategoryManager_btn_add = this.elements['businessGoodsCategoryManager:btn_add'];
    },
    watch: {
      filterText(val) {
        this.$refs.goodsTree.filter(val);
      }
    },
    computed: {
      ...mapGetters([
        'elements'
      ])
    },
    methods: {
      getList() {
        service.getGoodsRoot()
            .then(data => {
              if (data != undefined && data != null && data != '') {
                this.treeData = data;
              }
            })
      },
      filterNode(value, data) {
        if (!value) return true;
        return data.name.indexOf(value) !== -1;
      },
      getNodeData(data) {
        console.info('1111' + data.id + data.name);
        // 展示右边详细信息
        service.getObj(data.id).then(response => {
          this.form = response.data;
        });
        this.currentId = data.id;
      },
      doCancel() {
        this.formReadOnly = true;
        this.formStatus = '';
      },
      handleAdd() {
        this.resetTemp();
        this.formReadOnly = false;
        this.formStatus = 'create';
      },
      handleUpdate() {
        if (this.form.id) {
          this.formReadOnly = false;
          this.formStatus = 'update';
        }
      },
      handleDelete() {
        this.$confirm('此操作将永久删除, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
            .then(() => {
              service.delTreeObj(this.currentId)
      .then(() => {
        this.$notify({
          title: '成功',
          message: '删除成功',
          type: 'success',
          duration: 2000
        });
        this.getList();
      });
            });
      },
      doCreate(formName) {
        const set = this.$refs;
        set[formName].validate(valid => {
          if (valid) {
            service.addObj(this.form)
        .then(() => {
          this.formReadOnly = true;
          this.formStatus = '';
          this.getList();
          this.$notify({
            title: '成功',
            message: '创建成功',
            type: 'success',
            duration: 2000
          });
        })
          } else {
            return false;
          }
        });
      },
      doUpdate(formName) {
        const set = this.$refs;
        set[formName].validate(valid => {
          if (valid) {
            service.putObj(this.currentId, this.form).then(() => {
              this.formReadOnly = true;
              this.formStatus = '';
              this.getList();
              this.$notify({
                title: '成功',
                message: '创建成功',
                type: 'success',
                duration: 2000
              });
            });
          } else {
            return false;
          }
        });
      },
      resetTemp() {
        this.form = {
          parentid: this.currentId,
          name: '',
          sort: 1

        };
      }
    }
  }
</script>
